<!--  -->
<template>
  <div class="chat-list">
    <template v-for="(item,index) in chatList">
      <div class="chat-item" :key="index">
        <div class="clear-fix">
          <div :class="[item.status==2?'float-r flex-end':'float-left','flex']">
            <img class="avatar" :src="item.user_headimg" alt="">
            <div class="content f-14" :class="[item.status==2?'mr-12':'ml-12']">
              <span :class="[item.status==2?'arrow-right':'arrow-left']"></span>
              <div class="content-item">
                <img
                  class="img"
                  v-if="item.type==2"
                  :src="item.content"
                  alt=""
                  @click="previewImg(item.content)"
                >
                <div v-else>
                  <template v-for="(_item,_index) in item.content">
                    <span :key="_index" class="content-wrapper">
                      <span class="text" v-if="_item.type=='text'">{{_item.textContent}}</span>
                      <img
                        class="ej"
                        v-if="_item.type=='img'"
                        :src="'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/'+_item.textContent+'.gif'"
                      >
                    </span>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
export default {
  props: {
    chatList: {
      type: Array,
      default: () => {
        return [];
      },
      required: true
    }
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    previewImg(url) {
      ImagePreview([url]);
    },
    // 将匹配结果替换表情图片
    emotion(res) {
      let word = res.replace(/\#|\;/gi, "");
      const list = [
        "微笑",
        "撇嘴",
        "色",
        "发呆",
        "得意",
        "流泪",
        "害羞",
        "闭嘴",
        "睡",
        "大哭",
        "尴尬",
        "发怒",
        "调皮",
        "呲牙",
        "惊讶",
        "难过",
        "酷",
        "冷汗",
        "抓狂",
        "吐",
        "偷笑",
        "可爱",
        "白眼",
        "傲慢",
        "饥饿",
        "困",
        "惊恐",
        "流汗",
        "憨笑",
        "大兵",
        "奋斗",
        "咒骂",
        "疑问",
        "嘘",
        "晕",
        "折磨",
        "衰",
        "骷髅",
        "敲打",
        "再见",
        "擦汗",
        "抠鼻",
        "鼓掌",
        "糗大了",
        "坏笑",
        "左哼哼",
        "右哼哼",
        "哈欠",
        "鄙视",
        "委屈",
        "快哭了",
        "阴险",
        "亲亲",
        "吓",
        "可怜",
        "菜刀",
        "西瓜",
        "啤酒",
        "篮球",
        "乒乓",
        "咖啡",
        "饭",
        "猪头",
        "玫瑰",
        "凋谢",
        "示爱",
        "爱心",
        "心碎",
        "蛋糕",
        "闪电",
        "炸弹",
        "刀",
        "足球",
        "瓢虫",
        "便便",
        "月亮",
        "太阳",
        "礼物",
        "拥抱",
        "强",
        "弱",
        "握手",
        "胜利",
        "抱拳",
        "勾引",
        "拳头",
        "差劲",
        "爱你",
        "NO",
        "OK",
        "爱情",
        "飞吻",
        "跳跳",
        "发抖",
        "怄火",
        "转圈",
        "磕头",
        "回头",
        "跳绳",
        "挥手",
        "激动",
        "街舞",
        "献吻",
        "左太极",
        "右太极"
      ];
      let index = list.indexOf(word);
      return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" align="middle">`;
    }
  },
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.text {
  word-wrap: break-word;
}
.chat-list {
  padding: 10px;
}
.chat-item {
  margin-bottom: 20px;
}
.flex-end {
  flex-direction: row-reverse;
}
.avatar {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.content {
  position: relative;
  padding: 10px;
  max-width: 250px;
  line-height: 18px;
  background: #ebebeb;
  border-radius: 4px;
}
.arrow-left {
  position: absolute;
  left: -10px;
  top: 20px;
  transform: translate(0, -75%);
  display: inline-block;
  content: "";
  width: 0px;
  height: 0px;
  border-top: 6px solid transparent;
  border-right: 6px solid #ebebeb;
  border-bottom: 6px solid transparent;
  border-left: 6px solid transparent;
}
.arrow-right {
  position: absolute;
  right: -10px;
  top: 20px;
  transform: translate(0, -75%);
  display: inline-block;
  content: "";
  width: 0px;
  height: 0px;
  border-top: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #ebebeb;
}
.content-item {
  img {
    width: 50px;
    height: 50px;
  }
  .ej {
    height: 24px;
    width: 24px;
  }
}
</style>